<template>
	<view class="cu-bar"
		style="width: 100%;height: 7vh;position: absolute;top: 0;z-index: 202;background: url('http://8.146.208.139:4000/avator/1715395787618.png');padding-top: 20px;align-items: center;">
		<view class="action">
			<text class="cuIcon-back text-white" @click="returnBack()"></text>
		</view>
		<view class="content text-white" style="top:20px">
			社区详情
		</view>
	</view>
	<scroll-view scroll-y="true" style="height: 100vh; padding-bottom: 50px;margin: 0;top: 0;" class="bg-white">
		<view
			style="background: url('http://8.146.208.139:4000/avator/1715395787618.png');width: 100%;height: 30vh;z-index: 0;padding-top :14vh;;">
			<view class="FontGroup" style="margin-top: -10px;">
				<view>
					<h2 class="text-white" style="list-style: none;">{{ name }} </h2>
					<view class="" style="display: flex;color: rgba(245,245,245,0.8);margin-top: 1vh;">
						<p class="ban_small"><span style="margin-right: 1vw;">0</span>帖子</p>
						<p class="ban_small"><span style="margin-right: 1vw;">1</span>圈友</p>
					</view>
				</view>
				<button style="font-weight: 550!important; letter-spacing: 0.8px;" class="cu-btn" @click="ApplyJoin"
					v-if="myId != owner_id && ifJoin == false">申请加入</button>
				<button style="font-weight: 550!important; letter-spacing: 0.8px;" class="cu-btn" @click="ApplyQuit"
					v-if="myId != owner_id && ifJoin == true">退出社群</button>
				<!-- <button style="font-weight: 550!important; letter-spacing: 0.8px;" class="cu-btn" v-if="owner_id==myId"
					@click="chooseTeam">选择队伍</button> -->
				<button style="font-weight: 550!important; letter-spacing: 0.8px;" class="cu-btn"
					v-if="owner_id == myId" @click="changeCommunty">修改社群</button>
			</view>
		</view>
		<view class="Communty_content bg-white">
			<view class="Communty_Introduce text-gray">
				{{ introduction }}
			</view>
			<h3 style="margin-top: 30rpx;margin-left: 20px; color: #002251;">社群群主</h3>
			<view class="Leader_card">
				<view class="Leader_img">
					<image :src="owner_img" mode="widthFix" style="border-radius: 75%;width: 70px; height:70px">
					</image>
				</view>
				<view class="Leader_font">
					<h3 class="Leader_name" style="margin-left: 10px;margin-bottom: 2vh;padding-right: 10px;">
						{{ owner_name }}
					</h3>
					<view class="tag_list">
						<view class='cu-tag bg-red light ' style="margin-right: 1px;flex-wrap: nowrap;"
							v-for="(item, index) in owner_label" :key='index'>{{ item }}</view>
					</view>
				</view>
				<button class="cu-btn block bgcolor sm" @click="say">
					<text class="cuIcon-roundadd" style="color: #fefefe; letter-spacing: 1px;">联系</text>
				</button>
			</view>
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index == TabCur ? 'text-blue cur' : ''"
						v-for="(item, index) in TypeList" :key="index" @click="tabSelect(index)" :data-id="index">
						{{ item }}
					</view>
				</view>
			</scroll-view>
			<view style="padding-top:  20px;" title="最新动态" v-if="TabCur == 0">
				<view v-for="(item, index) in PostList" :key="index" v-if="PostList.length > 0">
					<dynamic :id='item.id' :postId='item.postedId' :posterAvatar='item.posterAvatar'
						:content='item.content' :name='item.posterUsername' :time='item.time.substring(0, 10)'>
					</dynamic>
				</view>
				<view v-else style="width: 100vw;">
					<van-empty description="暂无动态"
						image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" />
				</view>
			</view>
			<view v-if="TabCur == 1">
				<!-- 打卡队伍 -->
				<view v-if="ConmuntyAllTeam.length > 0">
					<view class="rankTeamCard" v-for="(item, index) in ConmuntyAllTeam" :key="index">
						<image :src="item.icon" mode="widthFix" class="rankTeamHeadImg"></image>
						<view class="rankTeamFont"
							style="margin-left: 3px;margin-top: 10px; width: 40vw;margin-right: 3vw;">
							<h3 style="margin-bottom: 3px;;">{{ item.name }}</h3>
							<!-- <view class="text-cut  text-df text-grey"></view> -->

						</view>
						<view style="width: 20vw;">
							<button class="cu-btn bg-blue light sm" v-if="MyAleadyTeam.find(it => it == item.id)"
								@click="changeTeam(item)">修改</button>
						</view>
						<h5><span>{{ item.teamNumber }}</span>名成员</h5>
					</view>
					<view style="width: 100%;height: 8vh;"></view>
				</view>
				<view v-else style="width: 100vw;">
					<van-empty description="暂无队伍"
						image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" />
				</view>
			</view>
			<view v-if="TabCur == 2" style="padding-top: 20px;width: 100%;">
				<div style="width: 100vw;"></div>
				<!-- 排行榜 -->
				<view class="text-lg"
					style="font-weight: 700;display: flex;justify-content: space-between;padding: 0 30px;margin: 1rem 0;">
					<view>排名</view>
					<view>队伍</view>
					<view style="display: flex;">
						<view style="margin-right: 4vw;">打卡次数</view>
						<!-- <view>获赞</view> -->
					</view>
				</view>
				<!-- 第一名 -->
				<view class="rankCard">
					<!-- 排名星星 -->
					<image src="http://8.146.208.139:4000/avator/1715489816368.png" mode="widthFix" class="rankStar">
					</image>
					<!-- 头像 -->
					<view style="display: flex;align-items: center;height: 7rem;width: 65%;">
						<image
							:src="RankList[0] ? RankList[0].icon : 'http://8.146.208.139:3000/avator/orignavator.png'"
							mode="widthFix" class="rankHeadImg"></image>
						<h3 class="rankName">{{ RankList[0] ? RankList[0].name : '虚位以待' }}</h3>
					</view>
					<view class="rankFont" style="display: flex;width:15%;">
						<h3 style="font-weight: 700;margin-right:2rem">{{ RankList[0] ? RankList[0].count : 0 }}</h3>
					</view>
				</view>
				<!-- 第二名 -->
				<view class="rankCard">
					<!-- 排名星星 -->
					<image src="http://8.146.208.139:4000/avator/1715491721380.png" mode="widthFix" class="rankStar">
					</image>
					<!-- 头像 -->
					<view style="display: flex;align-items: center;height: 7rem;width: 65%;">
						<image
							:src="RankList[1] ? RankList[1].icon : 'http://8.146.208.139:3000/avator/orignavator.png'"
							mode="widthFix" class="rankHeadImg"></image>
						<h3 class="rankName">{{ RankList[1] ? RankList[1].name : '虚位以待' }}</h3>
					</view>
					<view class="rankFont" style="display: flex;width:15%;">
						<h3 style="font-weight: 700;margin-right:2rem">{{ RankList[1] ? RankList[1].count : 0 }}</h3>
					</view>
				</view>
				<!-- 第三名 -->
				<view class="rankCard">
					<!-- 排名星星 -->
					<image src="http://8.146.208.139:4000/avator/1715491687370.png" mode="widthFix" class="rankStar">
					</image>
					<!-- 头像 -->
					<view style="display: flex;align-items: center;height: 7rem;width: 65%;">
						<image
							:src="RankList[2] ? RankList[2].icon : 'http://8.146.208.139:3000/avator/orignavator.png'"
							mode="widthFix" class="rankHeadImg"></image>
						<h3 class="rankName">{{ RankList[2] ? RankList[2].name : '虚位以待' }}</h3>
					</view>
					<view class="rankFont" style="display: flex;width:15%;">
						<h3 style="font-weight: 700;margin-right:2rem">{{ RankList[2] ? RankList[2].count : 0 }}</h3>
					</view>
				</view>
				<!-- 第四到十 -->
				<view class="rankCard" v-for="(item, index) in RankList.slice(3)" :key="index"
					style="padding-left: 10px;">
					<!-- 排名星星 -->
					<h2 style="width: 16%;height: 100%;text-align: center;line-height: 5rem;margin-right: 7.7%;">
						{{ index + 4 }}
					</h2>
					<!-- 头像 -->
					<view style="display: flex;align-items: center;height: 7rem;width: 65%;">
						<image :src="item.icon" mode="widthFix" class="rankHeadImg">
						</image>
						<h3 class="rankName">{{ item.name }}</h3>
					</view>
					<view class="rankFont" style="display: flex;width:15%;">
						<h3 style="font-weight: 700;margin-right:2rem">{{ item.count }}</h3>
					</view>
				</view>
				<view style="width: 100%;height: 8vh;"></view>
			</view>
			<view v-if="TabCur == 3">
				<!-- 互促 -->
				<view v-for="(item, index) in TeamMember" :key="index" v-if="TeamMember.length > 0">
					<view class="communtyMember" style="display: flex;">
						<image class="memberHead" :src="item.avatar" mode="widthFix"></image>
						<view class="fontgroup" style="margin-left: 5px;width: 10rem;">
							<h3 style="margin-left: 20px;">{{ item.name }}
								<view class="cu-tag sm bg-gray">{{item.Group}}</view>
							</h3>
							<view class="tag_list" style="width: 13rem;margin-top: 5px;">
								<view class='cu-tag bg-blue light' style="margin-right: 7px;"
									v-for="it in item.owner_label">{{ it }}</view>
							</view>
						</view>
						<view class="MemberBtns" style="width: 7rem;">
							<button class="cu-btn block bg-cyan light sm" @click="sayToOther(item)">
								<text style="letter-spacing: 0.7px;" class="cuIcon-roundadd "></text> 联系
							</button>
							<button class="cu-btn block bg-cyan light sm" @click="EncourageOther(item)">
								<text class="cuIcon-roundadd"></text> 互促
							</button>
						</view>
					</view>
				</view>
				<view v-else>
					<van-empty description="暂无队友"
						image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" />
				</view>
				<view style="width: 100vw;height: 8vh;"></view>
			</view>
		</view>
	</scroll-view>
	<view class="btns" v-if="ifJoin || myId == owner_id">
		<view class="btn bg-white" @click="goPublic">
			<view class="color text-xl"
				style="height: 100%;line-height: 6vh;letter-spacing: 1px;text-align: center;color: #2A82E4;">
				<text class="cuIcon-add"></text>
				发表动态
			</view>
		</view>
		<view class="btn bgcolor" @click="shareGroup">
			<view class="text-white text-xl"
				style="height: 100%;letter-spacing: 1px; line-height: 6vh;text-align: center;">
				分享圈子
			</view>
		</view>
	</view>

	<!-- 申请加入的气泡框 -->
	<view class="cu-modal show" v-if="show" style="z-index: 300;">
		<view class="cu-dialog" style="border-radius: 12px;">
			<!-- 申请加入 -->
			<view v-if='DialogType == 0' class="padding-xl bg-white">
				<h3 style="margin-bottom: 10px;">申请加入</h3>
				<view class='cu-avatar' style="width: 200rpx;height: 200rpx;"
					:style="'background-image: url(' + team_url + ');'"></view>
				<view class="cu-form-group">
					<view class="title">队名:</view>
					<input placeholder="请输入队名" name="input" v-model="team_name" />
				</view>
				<view class="cu-form-group">
					<view class="title">验证信息:</view>
					<input placeholder="请输入信息" name="input" v-model="team_mes" />
				</view>
				<view class="cu-form-group">
					<view class="title">队伍:</view>
					<picker @change="PickerChange" :value="index" :range="picker" style="z-index: 9999;">
						<view class="picker" style="text-align: center;">
							{{ index > -1 ? picker[index] : '请选择队伍' }}
						</view>
					</picker>
				</view>
			</view>
			<!-- 邀请 -->
			<view v-if='DialogType == 1' class="padding-xl bg-white">
				<h3 style="margin-bottom: 10px;">邀请队伍</h3>
				<view class="cu-form-group">
					<view class="title">队伍</view>
					<picker @change="PickerChange" :value="index" :range="picker" style="z-index: 9999;">
						<view class="picker" style="text-align: center;">
							{{ index > -1 ? picker[index] : '请选择队伍' }}
						</view>
					</picker>
				</view>
			</view>
			<!-- 修改社群 -->
			<view v-if='DialogType == 2' class="padding-xl bg-white">
				<h3 style="margin-bottom: 10px;">修改社群</h3>
				<view class="cu-form-group">
					<view class="title">名称</view>
					<input placeholder="请输入名称" name="input" v-model="name2" />
				</view>
				<view class="cu-form-group">
					<view class="title">介绍</view>
					<input placeholder="请输入介绍" name="input" v-model="introduce" />
				</view>
				<view class="cu-form-group">
					<view class="title">标签</view>
					<input placeholder="请输入标签" name="input" v-model="label_new" />
				</view>
				<view class="cu-form-group">
					<view class="title">类别</view>
					<picker @change="PickerChange" :value="index" :range="picker" style="z-index: 9999;">
						<view class="picker" style="text-align: center;">
							{{ index > -1 ? picker[index] : '请选择类别' }}
						</view>
					</picker>
				</view>
			</view>
			<!-- 修改队伍 -->
			<view v-if='DialogType == 3' class="padding-xl bg-white">
				<h3 style="margin-bottom: 10px;">修改队伍</h3>
				<view class="cu-form-group" style="display: block;">
					<!-- <view class="grid col-1 grid-square" style="width: 40%;margin: 0 auto;">
						<view class="bg-img" v-for="(item, index) in imgList" :key="index" :data-url="imgList[index]"
							style="width: 100%;!important">
							<image :src="imgList[index]" mode="aspectFill" style="border-radius: 15px;"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view> -->
					<view class="solids bg-blue light"
						style="border-radius: 15px;width:5rem;min-height: 4rem;margin: 0 auto;" @tap="ChooseImage">
						<image :src="headImgLL" style="width: 100%;height: 100%;" mode="widthFix"></image>
					</view>
					<!-- </view> -->
					<view style="display: flex;align-items: center;">
						<view class="title">名称</view>
						<input placeholder="请输入名称" name="input" v-model="name3" />
					</view>

				</view>
			</view>
			<view style="width: 100%;height: 50rpx;display: flex;margin-top: 10px;">
				<view class="text-black" style="width: 50%;" @click="cancel">
					<h3>取消</h3>
				</view>
				<view class="text-blue" style="width: 50%;" @click="sure">
					<h3>提交</h3>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue'
	import dynamic from '../components/dynamic.vue';
	// import { useRoute } from 'vue-router';
	import {
		communityDeatil,
		getMypost,
		getCategoryType,
		modifyDetail,
		encryptString,
		quitCommunty,
		getTeamRank,
		getreclist,
		getCommuntyPost,
		getAllTeam,
		MyTeam,
		TeamWithMe,
		uploadimg,
		changeAboutTeam,
		applyJoin
	} from '@/store/api.js'
	const index = ref(-1)
	// const index2 = ref(-1)
	const introduce = ref('')
	const categoryId = ref('')

	const ifJoin = ref(false)
	const imgList = ref([])
	const headImgLL = ref('')
	const ChooseImage = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: (res) => {
				console.log(res.tempFilePaths)
				res.tempFilePaths.forEach(item => {
					console.log(item)
					uploadimg(item).then(res => {
						console.log(res)
						headImgLL.value = (JSON.parse(res).data)
					})
				})
			}
		});
	}

	const shareGroup = () => {
		uni.setClipboardData({
			data: encryptString("复制到Meet打开：一起加油吧:" + String(groupId.value)),
			success: function(res) {
				uni.showToast({
					title: "口令已复制",
					icon: "success"
				});
			},
			fail: function(err) {
				console.log("fail:" + JSON.stringify(err));
				uni.showToast({
					title: "复制失败",
					icon: "none"
				});
			}
		});
	}
	const TeamMember = ref([])

	const sayToOther = (item) => {
		let ifConnect = uni.getStorageSync('AlreadyConnect')
		if (ifConnect) {
			uni.navigateTo({
				url: `/subpkg/chat_detail/chat_detail?name=${item.name}&src=${item.avatar}&userid=${item.userid}`
			})
		} else {
			uni.setStorageSync('detail', JSON.stringify({
				name: item.name,
				avator: item.avatar,
				userid: item.userid
			}))
			uni.switchTab({
				url: '/pages/Chat/Chat'
			})
		}
	}
	const EncourageOther = (item) => {
		let ifConnect = uni.getStorageSync('AlreadyConnect')
		if (ifConnect) {
			uni.navigateTo({
				url: `/subpkg/chat_detail/chat_detail?name=${item.name}&src=${item.avatar}&userid=${item.uid}&encourage=true`
			})
		} else {
			uni.setStorageSync('encourage', JSON.stringify({
				name: item.name,
				avator: item.avatar,
				userid: item.uid
			}))
			uni.switchTab({
				url: '/pages/Chat/Chat'
			})
		}
	}
	const picker = ref([])
	const picker_id = ref([])

	const show = ref(false);
	const myId = uni.getStorageSync('userid')
	const owner_id = ref(-1)
	const TabCur = ref(0)
	const name = ref('')
	const name2 = ref('')
	const RankList = ref([])
	const team_url = ref('http://8.146.208.139:3000/avator/orignavator.png')
	const team_mes = ref('')
	const team_name = ref('')

	const label = ref('')
	const label_new = ref('')

	const DialogType = ref(0) //0是申请加入，1邀请，2是修改
	const groupId = ref(0)
	const introduction = ref('')
	const owner_name = ref('')
	const owner_img = ref('')
	const owner_label = ref([])
	const tabSelect = (index) => {
		TabCur.value = index;
	}
	const TypeList = ([
		'最新动态',
		'打卡队伍',
		'排行榜',
		'互促'
	])
	const goPublic = () => {
		uni.navigateTo({
			url: `/subpkg/publicDynamic/publicDynamic?groupId=${groupId.value}`
		})
	}
	const returnBack = () => {
		uni.switchTab({
			url: '/pages/Home/Home'
		})
	}
	const active = ref('0')
	const PickerChange = (e) => {
		index.value = e.detail.value;
	}
	const cancel = () => {
		show.value = false
		picker.value = []
		index.value = -1
		label_new.value = ''
		introduce.value = ''
		name2.value = ''
		picker_id.value = []
		team_mes.value = ''
		team_url.value = 'http://8.146.208.139:3000/avator/orignavator.png'
		team_name.value = ''

	}
	const name3 = ref('')
	const sure = () => {
		if (DialogType.value == 0) { //申请加入

		} else if (DialogType.value == 3) { //修改队伍信息
			let data = {
				name: name3.value,
				icon: headImgLL.value ? headImgLL.value : 'http://8.146.208.139:3000/avator/orignavator.png',
				id: tranId.value
			}
			changeAboutTeam(data).then(res => {
				console.log(res)
				uni.showToast({
					icon: 'success',
					title: '修改成功'
				})
				getCommuntyAllTeam()
				tranId.value = -1
				name3.value == ''
				show.value = false
			}).catch(err => {
				uni.showToast({
					icon: 'fail',
					title: '修改失败'
				})
			})
		} else { //修改
			uni.showLoading({
				title: '修改中'
			})
			let data = {
				id: groupId.value,
				name: name2.value,
				label: label_new.value,
				introduction: introduce.value,
				categoryId: picker_id.value[index.value].id
			}
			// console.log(data)
			modifyDetail(data).then(res => {
				console.log(res)
				name.value = name2.value
				label.value = label_new.value
				introduction.value = introduce.value
				uni.hideLoading()
				uni.showToast({
					icon: 'success',
					title: '修改成功'
				})
			}).catch(err => {
				console.log(err)
				uni.hideLoading()
				uni.showToast({
					icon: 'fail',
					title: '修改失败'
				})
			})
		}
	}
	//申请加入
	const ApplyJoin = () => {
		DialogType.value = 0
		// show.value = true
		applyJoin(groupId.value).then(res => {
			console.log(res)
			uni.showToast({
				icon: 'success',
				title: '申请成功！等待审核'
			})
		}).catch(err => {
			console.log(err)
			uni.showToast({
				icon: 'fail',
				title: '申请失败！'
			})
		})

		// ifJoin.value = true
		// getMypost(1, 100).then(res => {
		// 	console.log(JSON.parse(res).data.rows)
		// 	JSON.parse(res).data.rows.forEach(item => {
		// 		picker.value.push(item.title)
		// 		picker_id.value.push(item.id)
		// 	})
		// })
	}
	//获取动态
	const PostList = ref([])
	const getPoster = (num, size) => {
		let data = {
			groupId: groupId.value,
			pageNum: 1,
			pageSize: 40
		}
		getCommuntyPost(data).then(res => {
			console.log('获取动态')
			console.log(res)
			res.data.data.rows.forEach(item => {
				PostList.value.unshift(item)
			})
			// PostList.value=res.data.data.rows
		}).catch(err => {
			console.log(err)
		})
	}
	// //选择队伍
	// const chooseTeam = () => {
	// 	DialogType.value = 1
	// 	show.value = true
	// 	getMypost(1, 100).then(res => {
	// 		console.log(JSON.parse(res).data.rows)
	// 		JSON.parse(res).data.rows.forEach(item => {
	// 			picker.value.push(item.title)
	// 			picker_id.value.push(item.id)
	// 		})
	// 	})
	// }
	const AllTeamId = ref('')
	const MyAleadyTeam = ref([]) //我的队伍
	const getMyTeanm = () => { //获取我加入的队伍
		MyTeam(1, 20).then(res => {
			console.log('我加入的队伍')
			console.log(res)
			console.log(AllTeamId.value)
			console.log(AllTeamId.value.split('/*/'))
			if (res.data.data.rows != null) {
				res.data.data.rows.forEach(item => {
					if (AllTeamId.value.split('/*/').find(i => i == item.id)) {
						MyAleadyTeam.value.push(item.id)
						TeamWithMe(item.id).then(res => {
							console.log(res)
							res.data.data.forEach(it => {
								TeamMember.value.push({
									name: it.userName,
									avatar: it.avatar,
									uid: it.id,
									owner_label: it.selfLabel.split('/*/'),
									Group: item.name
								})
							})

							console.log(MyAleadyTeam.value)
						})
					}


				})
			}
		}).catch(err => {
			console.log('我加入的队伍')
			console.log(err)
		})
	}
	const ConmuntyAllTeam = ref([])
	const getCommuntyAllTeam = () => { //获取所有队伍
		getAllTeam(groupId.value).then(res => {
			console.log("获取队伍")
			console.log(res)
			ConmuntyAllTeam.value = res.data.data.rows == null ? [] : res.data.data.rows
			if (res.data.data.rows != null) {
				res.data.data.rows.forEach(item => {
					AllTeamId.value+=item.id+'/*/'
				})
			}
		}).catch(err => {
			console.log(err)
		})
	}

	const tranId = ref(-1)
	const changeTeam = (item) => {
		tranId.value = item.id
		show.value = true
		headImgLL.value = item.icon
		DialogType.value = 3
	}

	//获取前十队伍
	const getRankHead = () => {
		console.log('排名前十' + groupId.value)
		getTeamRank(groupId.value).then(res => {
			console.log(res)
			RankList.value = res.data.data.rows == null ? [] : res.data.data.rows
		}).catch(err => {
			console.log(err)
		})
	}
	//修改社群
	const changeCommunty = () => {
		name2.value = name.value
		DialogType.value = 2
		show.value = true
		label_new.value = label.value
		introduce.value = introduction.value
		getCategoryType().then(res => {
			console.log(res.data.data)
			res.data.data.rows.forEach(item => {
				picker.value.push(item.name)
				picker_id.value.push({
					name: item.name,
					id: item.id
				})
			})
			index.value = picker_id.value.findIndex(item => item.id == categoryId.value)
		}).catch(err => {
			console.log(err)
		})
	}
	const ApplyQuit = () => {
		quitCommunty(groupId.value).then(res => {
			console.log(res)
			uni.showToast({
				icon: 'success',
				title: '退出成功'
			})
			ifJoin.value = false
		}).catch(err => {
			console.log(err)
			uni.showToast({
				icon: 'fail',
				title: '退出失败'
			})
		})
	}
	const say = () => {
		let ifConnect = uni.getStorageSync('AlreadyConnect')
		if (ifConnect) {
			uni.navigateTo({
				url: `/subpkg/chat_detail/chat_detail?name=${owner_name.value}&src=${owner_img.value}&userid=${owner_id.value}`
			})
		} else {
			uni.setStorageSync('detail', JSON.stringify({
				name: owner_name.value,
				avator: owner_img.value,
				userid: owner_id.value
			}))
			uni.switchTab({
				url: '/pages/Chat/Chat'
			})
		}
	}
	onMounted(() => {
		groupId.value = getCurrentInstance().proxy.$page.options.id
		ifJoin.value = getCurrentInstance().proxy.$page.options.if == 0 ? false : true
		getRankHead()
		getPoster()
		
		getCommuntyAllTeam()
		setTimeout(()=>{getMyTeanm()},1000)
		
		uni.$on('restore',()=>{
			console.log('接到刷新')
			PostList.value=[]
			getPoster()
		})
		// console.log(id)
		communityDeatil(groupId.value).then(res => {
			console.log(res.data.data)
			name.value = res.data.data.name
			introduction.value = res.data.data.introduction
			owner_name.value = res.data.data.owner.username
			owner_img.value = res.data.data.owner.avatar
			owner_label.value = res.data.data.owner.selfLabel.split('/*/')
			owner_id.value = res.data.data.owner.uid
			label.value = res.data.data.label
			categoryId.value = res.data.data.category.id

			console.log(myId)
			console.log(owner_id.value)
		})

	})
</script>

<style scoped lang="less">
	@media screen and (min-width: 1200px) {
		.rankTeamCard {
			width: 10vw;
		}

		.rankCard {
			padding: 0px 10px;
		}

		.rankHeadImg {
			width: 70px !important;
			border-radius: 12px;
			margin-right: 20px;
		}

		.rankTeamFont {
			width: 100px !important;
		}

		.btns {
			width: 30vw !important;
			position: fixed;
			height: 6vh;
			bottom: 0;
			display: flex;

			.btn {
				width: 50%;
				height: 100%;
			}
		}
	}

	.rankTeamCard {
		width: 100%;
		padding: 0 10px;
		height: 8vh;
		display: flex;
		align-items: center;
		margin-top: 20px;

		// border: 1px solid black;
		.rankTeamHeadImg {
			width: 80px;
			height: 80px;
			border-radius: 12px;
		}
	}

	.rankCard {
		display: flex;
		width: 100%;
		height: 5rem;
		align-items: center;
		padding: 0 20px;
		// border: 1px solid black;
		// justify-content: space-between;

		.rankStar {
			width: 3rem;
			margin-right: 2rem;
		}

		.rankHeadImg {
			width: 2rem;
			border-radius: 12px;
			margin-right: 20px;
		}
	}

	.communtyMember {
		padding: 0 2vw;
		height: 10vh;
		width: 100%;
		// border: 1px solid black;
		margin-bottom: 2vh;
		justify-content: space-between;
		align-items: center;

		.memberHead {
			// margin-right: 3vw;
			width: 70px;
			background-size: cover;
			border-radius: 75%;
		}

		.MemberBtns {
			display: flex;
			width: 40%;
			justify-content: space-between;
		}
	}

	.text_blackblue {
		color: #002251;
	}

	.ban_small {
		margin-right: 2vw;
	}

	.FontGroup {
		margin-top: 20px;
		width: 100%;
		height: 8rem;
		// border: 1px solid black;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.color {
		color: #002251;
	}

	.bgcolor {
		background-color: #2A82E4;
	}

	.Communty_content {
		padding-top: 3vh;
		// z-index: 100;
		width: 100%;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		height: 50vh;
		margin-top: -2vh;
	}

	.Communty_Introduce {
		// margin-top: 3vh;
		width: 100%;
		padding-left: 40rpx;
		padding-right: 100rpx;
	}

	.Leader_card {
		margin: 10px auto;
		padding-left: 6rpx;
		padding-right: 10px;
		width: 90%;
		height: 15vh;
		border-radius: 20px;
		display: flex;
		align-items: center;
		// background-color: black;
		box-shadow: 0px 0.5px 0.2px rgba(0, 0, 0, 0.1);
		// box-shadow:  37px 37px 74px #b8b8b8,
		//              -37px -37px 74px #ffffff;
		/* 水平偏移量 垂直偏移量 模糊半径 颜色 */
	}

	.Leader_img {
		width: 70px;
		border-radius: 75%;
		margin-right: 10px;
		height: 70px;
	}

	.Leader_font {
		width: 200px;
		margin-right: 0px;
	}

	.btns {
		width: 100%;
		position: fixed;
		height: 6vh;
		bottom: 0;
		display: flex;

		.btn {
			width: 50%;
			height: 100%;
		}
	}
</style>